<!--
*@Author: QWP
*@Description: 修改密码
*@Date: 2023-08-18 16:06:38
-->
<template>
  <u-dialog title="修改密码"
    width="800px"
    top="5vh"
    v-bind="$attrs"
    container="app"
    @submit="updateSubmit"
    @cancel="dialogClose">
    <div class="s-bg-white"
      style="padding: 12px;">
      <u-form :elements="elements" 
        :model="formRef" 
        :labelCol="{span: 3}"
        autocomplete="off"
        ref="form"/>   
      <!-- <a-form :labelCol="{span: 4}">
        <a-form-item label="username" v-bind="validateInfos.username">
          <a-input v-model:value="formRef.username" />
        </a-form-item>
        <a-form-item label="oldPassword" v-bind="validateInfos.oldPassword">
          <a-input v-model:value="formRef.oldPassword" />
        </a-form-item>
      </a-form> -->
    </div>
  </u-dialog>
</template>

<script lang='ts' setup>
import { ref, reactive, computed  } from 'vue' 
import { useLoginStore } from '@/store';
import { useRouter } from "vue-router";
import * as userService from '@/service/system/user';
import { jsonCopy, alertC, notificationC, nullC, messageC } from '@/util/common'
import { Form } from 'ant-design-vue'
import { storeToRefs } from 'pinia';

const router = useRouter()
const loginStore = useLoginStore()
const { userInfo } = storeToRefs(loginStore)

const emit = defineEmits(['success'])

const form = ref(null)
const formRef = reactive({
  id: '',
  username: userInfo.value['account'],
  oldPassword: '',
  password: '',
  confirmPassword: '',
})
const elements = reactive([
  {element: 'input', label: '用户名', key: 'username',   
    col: { span: 24, },
    componentProps: { disabled: true, }
  },
  {element: 'password', label: '旧密码', key: 'oldPassword', 
    col: { span: 24, },
    formItemProps: { required: true, autoComplete: "new-password",}
  },
  {element: 'password', label: '新密码',key: 'password',
    col: { span: 24, },
    formItemProps: { required: true, autoComplete: "new-password",
      rules: { 
        type: 'string', 
        pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*=&])[A-Za-z\d@$!%*=&]{8,}$/, 
        message: '密码必须是8位以上且包含大小写字母,数字和至少一位@$!%*=&的特殊字符串组成', 
        transform(value) {
          return value.trim();
        }
      }
    }
  },
  {element: 'password', label: '确认密码',key: 'confirmPassword',
    col: { span: 24, },
    formItemProps: { required: true, autoComplete: "new-password",
      rules: { 
        type: 'string',
        pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*=&])[A-Za-z\d@$!%*=&]{8,}$/, 
        message: '密码必须是8位以上且包含大小写字母,数字和至少一位@$!%*=&的特殊字符串组成',  
        transform(value) {
          return value.trim();
        }
      }
    }
  },
])

// 修改密码提交
const updateSubmit = async () => {
  try {
    await form.value.form.validate()
  } catch (error) {
    messageC("请将必填项填写完毕!", "warning")
    return
  }
  let tform = jsonCopy(formRef);
  if(tform.confirmPassword != tform.password) {
    alertC("确认密码与新密码不一致!", "warning");
    return
  }

  tform.id = nullC(userInfo.value['userId'])

  delete tform.username;
  
  try {
    await alertC("确认保存?", 'confirm')
    const res = await userService.password(tform)
    if(res.code == 0) {
      notificationC({
        title: '成功',
        message: res.msg,
        type: 'success'
      });
      emit('success')

      loginStore.setToken('')
      loginStore.setRefreshToken('')

      router.replace('/');
    }
    else {
      messageC(res.msg, 'warning')
    }
  } catch (error) {}
}

const dialogClose = () => {
  form.value.form.resetFields();
}
</script>